import echarts from 'echarts'
// 静态属性，样式属性，剥离数据 多种屏幕尺寸都事先部署好
const staticOption = {
  color: ['#007aff', '#fdb944'],
  title: {
    text: '',
    left: 'center',
    textStyle: {
      color: '#d9e7ff',
      fontWeight: 'normal',
      fontSize: 24
    }
  },
  tooltip: {},
  legend: {
    data: [],
    itemWidth: 20,
    itemHeight: 6,
    top: '10%',
    textStyle: {
      color: '#94aad4',
      fontSize: 22
    }
  },
  radar: {
    shape: 'circle',
    radius: '60%',
    center: ['50%', '58%'],
    name: {
      textStyle: {
        color: '#bad3ff',
        fontSize: 22,
        padding: [3, 5]
      }
    },
    splitArea: {
      areaStyle: {
        color: 'transparent'
      }
    },
    axisLine: {
      lineStyle: {
        color: '#05388f'
      }
    },
    splitLine: {
      lineStyle: {
        color: '#05388f'
      }
    },
    indicator: []
  },
  series: [{
    name: '',
    type: 'radar',
    data: []
  }]
}

const staticOptionMid = {
  color: ['#007aff', '#fdb944'],
  title: {
    text: '',
    left: 'center',
    textStyle: {
      color: '#d9e7ff',
      fontWeight: 'normal',
      fontSize: 20
    }
  },
  tooltip: {},
  legend: {
    data: [],
    itemWidth: 20,
    itemHeight: 6,
    top: '10%',
    textStyle: {
      color: '#94aad4',
      fontSize: 16
    }
  },
  radar: {
    shape: 'circle',
    radius: '60%',
    center: ['50%', '58%'],
    name: {
      textStyle: {
        color: '#bad3ff',
        fontSize: 16
      }
    },
    splitArea: {
      areaStyle: {
        color: 'transparent'
      }
    },
    axisLine: {
      lineStyle: {
        color: '#05388f'
      }
    },
    splitLine: {
      lineStyle: {
        color: '#05388f'
      }
    },
    indicator: []
  },
  series: [{
    name: '',
    type: 'radar',
    data: []
  }]
}

// 备选颜色，有需求则进行循环
const colors = [(new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
  // 0% 处的颜色
  offset: 0,
  color: '#007aff'
}, {
  // 100% 处的颜色
  offset: 1,
  color: '#00afff'
}
], false)),
  (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    // 0% 处的颜色
    offset: 0,
    color: '#fdb944'
  }, {
    // 100% 处的颜色
    offset: 1,
    color: '#fed981'
  }
  ], false))]
const borderColor = ['#007aff', '#fdb944']
let colorIndex = 0

// 获取设备宽度
const screen = window.screen.width

class ChartFactory {
  constructor (additionalOptions) {
    // 根据屏幕宽度获取不同配置的echarts配置
    this.option = staticOption
    if (screen <= 1600) {
      this.option = staticOptionMid
    }
    // 下方复制属于浅拷贝，指向同个内存，针对可能有更改的需求，要进行一次清理
    // this.clear()
    // 装配数据 必须使用箭头函数
    colorIndex = 0
    this.option.title.text = additionalOptions.title
    this.option.legend.data = additionalOptions.legendData
    this.option.radar.indicator = additionalOptions.indicator
    this.option.series[0].name = additionalOptions.seriesName
    additionalOptions.seriesData.forEach((p1) => {
      this.option.series[0].data.push(
        {
          value: p1.value,
          name: p1.name,
          symbolSize: 10,
          itemStyle: {
            borderColor: borderColor[colorIndex],
            borderWidth: 3
          },
          lineStyle: {
            width: 4,
            color: colors[colorIndex]
          }
        }
      )
      colorIndex += 1
    })
  }

  // 清理方法，要将部署的新数据全部置空
  clear () {
    this.option.series[0].data = []
  }

  getOption () {
    return this.option
  }
}

export { ChartFactory }
